<template>
	<view class="content">
		<uni-search-bar radius="5" @confirm="doSearch" @clear="doClear" v-model="keywords" clearButton="auto"
			cancelButton="none" placeholder="请输入柜号">
		</uni-search-bar>

		<uni-list>
			<uni-list-item v-for="(item,index) in warnList" :key="index"
				:title="item.semaphoreName +' ' + item.equipCode" :note="item.occurrenceTime">
				<!-- 自定义 body -->
				<template v-slot:body>
					<view class="warn-box">{{item.semaphoreName || ''}}</view>
					<view class="slot-box">地址Id：{{item.addrId || ''}}</view>
					<view class="slot-box">设备编码：{{item.equipCode || ''}}</view>
					<view class="slot-box">上报时间：{{item.occurrenceTime || ''}}</view>
				</template>
				<!-- 自定义 footer-->
				<template v-slot:footer>
					<text class="iconfont icon-copy" @click="isCopy(item)"></text>
				</template>
			</uni-list-item>
		</uni-list>

		<view v-show="isLoadMore && warnList.length >0">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>

		<view class="nodata" v-if="warnList.length == 0">
			<image class="empty_img" src="/static/images/empty.png" mode="widthFix"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {
		warning
	} from "@/api/my.js";
	import {
		removeNullUndefined,
		doCopy
	} from "@/common/index.js";
	export default {
		data() {
			return {
				warnList: [],
				keywords: "", //搜索关键字
				page: 1, //页码
				size: 12,

				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				refresh: false, // 下拉刷新标示
			}
		},
		created() {
			this.getDataList();
		},
		methods: {
			getDataList() {
				this.$Toast.loading('加载中');
				warning('/applets/list', 'get', {
						...removeNullUndefined({
							pageNum: this.page,
							pageSize: this.size,
							equipCode: this.keywords
						})
					}).then(res => {
						if (res.code == 200) {
							let datas = res.data;
							this.warnList = this.page == 1 ? datas : this.warnList.concat(datas);
							if (datas.length < this.size) { //小于size数，停止请求
								this.isLoadMore = true;
								this.loadStatus = 'nomore';
							} else {
								this.isLoadMore = false;
							}
							uni.hideLoading();
							if (this.refresh) {
								uni.stopPullDownRefresh();
								this.refresh = false;
							}
						}
					})
					.catch(error => {
						uni.hideLoading();
						this.isLoadMore = false;
					});

			},
			doSearch() {
				this.page = 1;
				this.getDataList();
			},
			doClear() {
				this.keywords = "";
				this.page = 1;
				this.getDataList();
			},
			// 复制
			isCopy(item) {
				doCopy(item.equipCode);
			},
			onPullDownRefresh() {
				this.page = 1;
				this.getDataList();
				this.refresh = true;
			},
			onReachBottom() {
				if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
					this.isLoadMore = true;
					this.page++;
					this.getDataList();
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont.css";

	/deep/ .uni-list-item__container {
		align-items: center;
	}

	/deep/ .uni-list-item {
		line-height: 40rpx;
		font-size: 26rpx;
		color: #555555;
	}

	.icon-copy {
		position: absolute;
		right: 40rpx;
		font-size: 42rpx;
		color: #666666;
	}

	.warn-box {
		font-size: 32rpx;
		color: #3a3a3a;
		font-weight: 600;
		margin-bottom: 10rpx;
	}
</style>
